<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--import jstl标签--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>智链速拼-登录</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js"></script>
    <script type="text/javascript" src="res/jquery/jquery-1.11.1-min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css">
    <style>
        /*@import url('https://rsms.me/inter/inter.css');*/
        :root {
            --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
        }
        body {
            font-feature-settings: "cv03", "cv04", "cv11";
        }
    </style>


    <script type="text/javascript">
        $(function (){

            //给整个窗口加入回车登录
            $(window).keydown(function (event){
                if(event.keyCode == 13){
                    $("#loginBtn").click();
                }
            });


            $("#scanCodeLogin").click(function (){
                alert("该功能正在开发中,请使用账号密码登录")
            })

            $("#wxLogin").click(function (){
                alert("该功能正在开发中,请使用账号密码登录")
            })

            /**
             * 进行登录数据校验
             */
            $("#loginNum").blur(function (){
                var phoneReg = new RegExp(/0?(13|14|15|18|17)[0-9]{9}/);
                if(!phoneReg.test($.trim($("#loginNum").val()))){
                    $("#phoneMsg").html('请输入有效手机号');
                }else{
                    $("#phoneMsg").html('');
                }
            })
            $("#loginPwd").blur(function (){
                if($.trim($("#loginPwd").val()) == null || $.trim($("#loginPwd").val()) === ''){
                    $("#pwdMsg").html('密码不能为空');
                }else{
                    $("#pwdMsg").html('');
                }
            })


            $("#loginBtn").click(function (){
                var number = $.trim($("#loginNum").val());
                var password = $.trim($("#loginPwd").val());
                var userType = $.trim($("#loginUserType").val());
                var adminpassword = $.trim($("#loginPwd").val());
                var isRemMe = $("#isRemMe").prop("checked")
                var user = {number,password,userType,isRemMe}
                var admin = {number,adminpassword,userType,isRemMe}
                //非空判断
                if(password == null || password === ''){
                    alert("请输入合法数据!")
                    return;
                }else if($("#phoneMsg").html() != '' ||
                         $("#pwdMsg").html() != ''){
                    alert("请按红字提示输入登录信息:" )
                    return;
                }else if (userType === "1" || userType === "2"){
                    $.ajax({
                        url:'dev/user/login',
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(user),
                        type:'post',
                        dataType:'json',
                        success: data => {
                            if(data.data == null){
                                //判断登录人员身份  进入不同页面
                                if(userType === "1"){
                                    //登录成功
                                    //托运人
                                    window.location.href='getAddressInfo'
                                }else if(userType === "2"){

                                    window.location.href='toTransport'
                                }
                            }else{
                                $("#tipMsg").html(data.data);
                                return true;
                            }
                        },
                        beforeSend:function(){
                            $("#tipMsg").html("正在努力验证,请稍等...");
                            return true;
                        }
                    })
                }else{
                    $.ajax({
                        url:'dev/admin/login',
                        contentType: "application/json;charset=UTF-8",
                        data:JSON.stringify(admin),
                        type:'post',
                        dataType: 'json',
                        success: data => {
                            if(data.data == null){
                                //判断登录人员身份  进入不同页面
                                if(userType === "0"){
                                    //登录成功
                                    //管理员
                                    window.location.href='toAdminIndex'
                                }
                            }else{
                                $("#tipMsg").html(data.data);
                                return true;
                            }
                        },
                        beforeSend:function(){
                            $("#tipMsg").html("正在努力验证,请稍等...");
                            return true;
                        }
                    })
                }

            })

        })
    </script>


</head>
<body  class=" d-flex flex-column">
<div class="page page-center">
    <div class="container container-tight py-4">
        <div class="text-center mb-4">
            <a href="toLogin" class="navbar-brand navbar-brand-autodark"><img src="${pageContext.request.contextPath}/res/images/logo.png" height="70" alt=""></a>
        </div>
        <div class="card card-md">
            <div class="card-body">
                <h2 class="h2 text-center mb-4">登录您的账户</h2>
                <form action="./" method="get" autocomplete="off" novalidate>
                    <div class="mb-3">
                        <label class="form-label">账号
                            <span id="phoneMsg" style="color: red"></span>
                        </label>
                        <input autofocus id="loginNum" value="${cookie.loginActCookie.value}" class="form-control" placeholder="Enter phone" autocomplete="off">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">
                            密码

                            <span id="pwdMsg" style="color: red"></span>
                        </label>
                        <div class="input-group input-group-flat">
                            <input  id="loginPwd" value="${cookie.loginPwdCookie.value}" type="password" class="form-control"  placeholder="your password"  autocomplete="off">
                            <span class="input-group-text">

                  </span>
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">用户类型</label>
                        <select id="loginUserType" type="text" class="form-select" placeholder="Select a date" id="select-tags-advanced" value="">
                            <option value="1">托运方</option>
                            <option value="2">承运方</option>
                            <%--<option value="0">管理员</option>--%>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-check">

                            <c:if test="${not empty cookie.loginActCookie and not empty cookie.loginPwdCookie}">
                                <input id="isRemMe" type="checkbox" class="form-check-input" checked/>
                            </c:if>
                            <c:if test="${empty cookie.loginActCookie or empty cookie.loginPwdCookie}">
                                <input id="isRemMe" type="checkbox" class="form-check-input" />
                            </c:if>

                            <span class="form-check-label">在此设备上记住我</span>
                        </label>
                        <span id="tipMsg" style="color: red"></span>
                    </div>
                    <div class="form-footer">

                        <button id="loginBtn" type="button" class="btn btn-primary w-100">登录</button>
                    </div>
                </form>
                <div class="row">
                    <div class="col"><a id="scanCodeLogin" class="btn w-100">
                        <img src="${pageContext.request.contextPath}/res/images/qrcode_icon.png" width="24" height="24">
                        扫码快速登录
                    </a></div>
                    <div class="col"><a id="wxLogin"  class="btn w-100">
                        <img src="${pageContext.request.contextPath}/res/images/icon24_appwx_logo.png" width="24" height="24">
                        使用微信登录
                    </a></div>
                </div>
            </div>
        </div>
        <div class="text-center text-muted mt-3">
            还没有账户？ <a href="toRegister" tabindex="-1">注册</a>
        </div>
    </div>
</div>
</body>
</html>
